
import React, { useState } from 'react';
import './navtab.css'

const newList1 = ['招募合伙人', '招募服务商', '招募设计师']
const newList2 = ['资源与合作', '实战攻略', '白皮书', '直播视频']
const newList3 = ['帮助中心', '在线客服', '意见反馈']

const newList4 = ['银行保险', '文化传媒', '企业服务', '兴趣教育', '政府融媒', '医疗健康', '婚庆', '旅游', '物业']
const newlist5 = ['会议活动营销', '企业微信运营', '活动策划', '招聘', '方案模板']

const newList6 = ['H5', '互动', '海报', '电子画册', '长页', '视频', '表单', '数字人']
const newList7 = ['AI文案', 'AI问卷']
const newList8 = ['智能抠图', '批量水印', '拼图', '图片改大小', '艺术二维码', '图片家文字', '海报批量制作', '水印相机', 'H5批量制作', '证件照', '图片美化']
const newList9 = ['模版中心', '素材中心', '版权保障']
const newList10 = ['企业内容上传', '企业内容协作', '内容合规保障']
const newList11 = ['互动抽奖', '红包营销', '投票评选', '互动游戏', '考试答题', '报名', '调研问卷', '签到']
const newList12 = ['智能分发', '公总号涨粉', '全员分发', '生成短连接', '短信群发', '嵌入小程序']
const newList13 = ['获取活码', '智能雷达', '客户群发', '企微客户管理', '朋友圈群发']
const newList14 = ['打赏', '预约管理', '收款', '商品管理', '优惠劵', '线索客户管理']

const newList15 = ['适合个人使用', '版权授权：个人商用', '个人模板免费用']
const newList16 = ['适合个体户、小微企业', '版权授权：企业商用', '全场模板免费用']
const newList17 = ['适合金融、教育、传媒、政府等大型企事业单位使用', '版权授权：企业商用', '支持多人协作']
const newList18 = ['适合具有研发能力的大型企业或平台使用', 'API无缝对接自有产品小程序等', '3分钟把易企秀搬回家']

const newList19 = ['开业邀请函', '宴会邀请函', '商务邀请函', '展会邀请函', '毕业邀请函', '公益活动', '晚会请帖', '酒会邀请函', '招商加盟', '周年庆典', '寿宴请帖', '乔迁邀请函', '婚礼请帖', '生日邀请函',
    '团购邀请函']
const newList20 = ['校园招聘', '社会招聘', '兼职招聘', '实习招聘', '互联网招聘', '销售招聘', '家政招聘', '司机招聘', '电子简历', '内部推荐', '录取通知', '入职', '转正', '晋升', '入职周年', '离职', '聘请证书']
const newList21 = ['招生手册', '产品图册', '政务宣传册', '招商手册', '企业期刊']
const newList22 = ['人物评选', '作品评选', '趣味投喂', '意见征集', '萌宝大赛', '投影大赛', '视频大赛', '年度评选', '才艺比拼', '内部评选', '教师评选', '优秀员工评选', '最佳标兵', '美食大赛', '门店PK', '品牌评选']
const newList23 = ['企业祝福', '个人祝福', '节日祝福', '新婚祝福', '生日贺卡']
const newList24 = ['表彰通报', '荣誉奖状', '喜报战报', '排行榜', '获奖名单']
const newList25 = ['视频相册', '毕业相册', '恋爱相册', '旅行相册', '宝宝相册', '全家福', '聚会相册', '美食相册', '军训相册', '宠物相册']
const newList26 = ['易拉宝', 'X展架', '促销活动', '新品发布', '红包', '短信通知', '优惠券', '电子会员卡', '菜单设计']
const newList27 = ['大转盘', '砸金蛋', '摇一摇', '九宫格', '老虎机', '扭蛋机', '刮刮乐', '吹牛', '开盲盒', '点击+转盘', '游戏+抽奖', '打地鼠+刮刮乐', '养成+大转盘', '组队+大转盘']
const newList28 = ['报名表', '在线申请', '预约登记', '商品订购', '信息登记', '签到打卡', '体检预约', '日历预约', '招商加盟报名表', '学生报名表', '招聘报名', '课程报名', '排查筛选']
const newList29 = ['520', '端午节', '618', '儿童节', '暑假', '高考']
const newList30 = ['学习宣传', '政务', '公益环保', '安全教育', '防控', '文明建设', '乡村振兴', '在线答题', '免费领会员']
const newList31 = ['招生模板', '课程介绍', '早教启蒙', "幼儿园", "中小学", "大专院校", '大学本科', '成人教育', '职业技术', '研究生', 'MBA', 'IT职业学校', '校园活动']
const newList32 = ["中餐", "西餐", "快餐小吃", "甜品烘焙", "生鲜果蔬", "奶茶饮品", "咖啡厅", "日韩料理", "酒吧", "零食副食", "火锅", "夜宵", "烧烤"]
const newList33 = ["婚礼请柬", "婚寡酒楼", "婚庆司仪", '婚纱摄影', '相亲联谊', '婚礼用品', '婚礼策划']
const newList34 = ["放假通知", "倒计时", "奖惩通知", "意见征集", "返岗复工", "行业资讯", "开工通知", "直播海报"]
const newList35 = ["政府", "公益", "物业", "婚庆", "超市", "百货", "教育培训", "互联网", "医疗健康", "医美健身", "房地产", "家居", "家装", "家电", "母婴", "宠物", "家政", "服装", '汽车']
const newList36 = ["日报周报", "述职汇报", '工作计划', '总结复盘']
const newList37 = ["提车仪式", "汽车销售", "汽车维修", "救援汽车", "美容汽车", "售后汽车", "能源站汽车", "保险交管政务"]
const newList38 = ["电子名片", "打印名片", "工作证", "证书(横板)", "证书(竖版)", "人物图片", '人像抠图']
const newList39 = ["早安", "晚安", "加油助威", "家居生活", "日历黄页", "护肤", "穿衣搭配", "头像", "美食", "养生", "缅怀默哀"]



function Tab() {
    //内容中台(弹框的内容)
    const toggle = [
        {
            img: "../../public/client_icon5.png",
            title: "API集成",
            desc: "低代码开发，轻便对接APP/小程序/SaaS系统，搭建自有素材模板库"
        },
        {
            img: "../../public/client_icon2.png",
            title: "SaaS行业内容中台解决方案",
            desc: "对接6大创意工具，嵌入海量模板素材，打通产品业务闭环"
        },
        {
            img: "../../public/client_icon7.png",
            title: "私有化部署",
            desc: "独立部署，数据本地存储，模板一次付费永久使用，软件版本可更新"
        },
        {
            img: "../../public/client_icon4.png",
            title: "金融保险行业内容解决方案",
            desc: "批量生成年度账单、产品落地，营销协同，赋能全员属地营销"
        },
        {
            img: "../../public/client_icon1.png",
            title: "小程序互动营销",
            desc: "丰富的活动整合营销，快速上新活动，支持微信小程序和支付宝小程序"
        },
        {
            img: "../../public/client_icon6.png",
            title: "零售连锁行业中台解决方案",
            desc: "紧跟热点，快速生成营销活动内容。打通社群、小程序、持续引流"
        },
        {
            img: "../../public/client_icon3.png",
            title: "APP运营",
            desc: "丰富的模板素材，覆盖APP拉新、促活、转化多应用场景"
        },
        {
            img: "../../public/client_icon8.png",
            title: "融媒体内容解决方案",
            desc: "0研发高效创意内容供给，创新公益活动，自有品牌曝光，无第三方标识"
        }
    ]

    return (
        <div className='tab-box'>

            <ul>

                <li className='free' style={{ fontWeight: '700' }}>免费模版
                    <div className='Template'>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>电子邀请函
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList19.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }

                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>在线招聘
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList20.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>电子画册
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList21.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>在线招聘
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList22.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>电子贺卡
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList23.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>表彰激励
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList24.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>电子相册
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList25.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>营销推广
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList26.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>在线抽奖
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList27.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>在线报名
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList28.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>节日热点
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList29.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>政务公益
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList30.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>教育培训
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList31.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>餐饮
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList32.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>婚庆
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList33.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>汽车
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList34.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>通知公告
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList35.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>行业常用
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList36.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>电子简报
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList37.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>人物介绍
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList38.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>
                        <h3 className='member-title' style={{ marginLeft: "30px" }}>日签打卡
                            <img src="../../public/右右.png" alt="" />
                            <div className='Template-list'>
                                {
                                    newList39.map((item, index) => {
                                        return (
                                            <li key={index} style={{ fontSize: "18px", paddingLeft: "20px" }}>{item}</li>
                                        )
                                    })
                                }
                            </div>
                        </h3>


                    </div>
                </li>

                <img className='img1' src="../../public/hot.png" alt="" />
                <img className='img2' src="../../public/ban.png" alt="" />

                <li className='Activate'>开通会员
                    <div className='vip'>
                        <div className='vip-box-left'>
                            <img src="../../public/member_bg1.png" alt="" />
                            <h2 className='member-title'>设计个人版
                                <img src="../../public/右右.png" alt="" />
                            </h2>
                            {
                                newList15.map((item, index) => {
                                    return (
                                        <div className='member-desc-item' key={index}>
                                            <div className='desc-dot'>
                                                <span className='desc-dot'></span>
                                            </div>
                                            <p className='desc-content'>{item}</p>
                                        </div>
                                    )
                                })
                            }

                        </div>
                        <div className='vip-box-left1'>
                            <img src="../../public/member_bg2.png" alt="" />
                            <h2 className='member-title'>设计专业版
                                <img src="../../public/右右.png" alt="" />
                            </h2>
                            {
                                newList16.map((item, index) => {
                                    return (
                                        <div className='member-desc-item' key={index}>
                                            <div className='desc-dot'>
                                                <span className='desc-dot'></span>
                                            </div>
                                            <p className='desc-content'>{item}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className='vip-box-right'>
                            <img src="../../public/member_bg3.png" alt="" />
                            <h2 className='member-title'>营销旗舰版
                                <img src="../../public/右右.png" alt="" />
                            </h2>
                            {
                                newList17.map((item, index) => {
                                    return (
                                        <div className='member-desc-item' key={index}>
                                            <div className='desc-dot'>
                                                <span className='desc-dot'></span>
                                            </div>
                                            <p className='desc-content'>{item}</p>
                                        </div>
                                    )
                                })
                            }
                        </div>
                        <div className='vip-box-right1'>
                            <img src="../../public/member_bg4.png" alt="" />
                            <h2 className='member-title'>内容中台
                                <img src="../../public/右右.png" alt="" />
                            </h2>
                            {
                                newList18.map((item, index) => {
                                    return (
                                        <div className='member-desc-item' key={index}>
                                            <div className='desc-dot'>
                                                <span className='desc-dot'></span>
                                            </div>
                                            <p className='desc-content'>{item}</p>
                                        </div>
                                    )
                                })
                            }

                        </div>
                        <div className='vip-box-bnt'>
                            <p className='member-title'>查看不同方案对比
                                <img src="../../public/右右.png" alt="" />
                            </p>

                        </div>
                    </div>
                </li>


                <li className='product'>产品服务
                    <div className='service'>
                        <div className='service-left'>
                            <h3 className='product-title'>创意设计</h3>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon1.png" alt="" />
                                在线编辑
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList6.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon2.png" alt="" />
                                AI创作
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList7.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon3.png" alt="" />
                                做图工具
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList8.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className='service-zong'>
                            <h3 className='product-title'>内容协作</h3>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon4.png" alt="" />
                                官方创意资源
                            </h3>
                            <div className='primary-list1'>
                                {
                                    newList9.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon5.png" alt="" />
                                企业内容中心
                            </h3>
                            <div className='primary-list1'>
                                {
                                    newList10.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className='service-jian'>
                            <h3 className='product-title'>推广获客</h3>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon6.png" alt="" />
                                活动运营
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList11.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon7.png" alt="" />
                                推广工具
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList12.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>

                        </div>
                        <div className='service-right'>
                            <h3 className='product-title'>私域运营</h3>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon8.png" alt="" />
                                企微运营
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList13.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                            <h3 className='primary-title'>
                                <img src="../../public/primary_icon9.png" alt="" />
                                收入转化
                            </h3>
                            <div className='primary-list'>
                                {
                                    newList14.map((item, index) => {
                                        return (
                                            <p key={index}>{item}</p>
                                        )
                                    })
                                }
                            </div>
                        </div>
                        <div className='service-right-box'>
                            <h3 className='product-title'>官方产品入口</h3>
                            <div className='entrance-list'>
                                <div className='list-item'>
                                    <img src="../../public/entrance_bg1.png" alt="" />
                                    <div className='entrance-content'>
                                        <h3>易企秀官网</h3>
                                        <span>百万设计模板，适合企业使用</span>
                                    </div>
                                </div>
                            </div>
                            <div className='entrance-list'>
                                <div className='list-item'>
                                    <img src="../../public/entrance_bg2.png" alt="" />
                                    <div className='entrance-content'>
                                        <h3>内容中心</h3>
                                        <span>适合具有研发能力的大型企业或平台</span>
                                    </div>
                                </div>
                            </div>
                            <div className='download-qrcode'>
                                <hr style={{ width: '170px', marginLeft: "35px" }} />
                                <br />
                                <h2 className='download-title'>
                                    <img src="../../public/logo_icon.png" alt="" />
                                    下载APP
                                </h2>
                                <span className='download-desc'>
                                    适合个人\商户\微商使用
                                    <br />
                                    适用企业用户移动办公
                                </span>
                            </div>
                            <div className='qrcode-box'>
                                <img src="../../public/app_qrcode.png" alt="" />

                            </div>
                        </div>
                    </div>

                </li>

                <li className='solve'>解决方案
                    <div className='programme'>
                        <div className='programme-left'>
                            <div className='industry'>
                                <h3>行业解决方案</h3>
                                {
                                    newList4.map((item, index) => {
                                        return <p key={index}>{item}</p>
                                    })
                                }
                            </div>
                            <div className='scene'>
                                <h3>场景解决方案</h3>
                                {
                                    newlist5.map((item, index) => {
                                        return <p key={index}>{item}</p>
                                    })
                                }
                            </div>
                        </div>
                        <div className='programme-right'>
                            <div className='kefu-img'>
                                <img src="../../public/kefu_img.png" alt="" />
                            </div>

                            <h2 className='company-title'>企业采购1对1专属顾问</h2>
                            <img className='qrcode-img' src="../../public/kefu_qrcode.png" alt="" />
                            <p className='company-tips'>立即扫码，真人咨询</p>
                        </div>

                    </div>
                </li>

                <li className='cooperation'>内容中台
                    <div className='middleground'>
                        <div className="middleground-left">
                            {
                                toggle.map((item, index) => {
                                    return <div className='middleground-left-box1' key={index}>
                                        <img className='client-img' src={item.img} alt="" />
                                        <div className='client-box'>
                                            <h3 className='client-title'>{item.title}</h3>
                                            <p className='client-desc'>{item.desc}</p>
                                        </div>
                                    </div>
                                })
                            }
                        </div>
                        <div className="middleground-right">
                            <div className='kefu-img'>
                                <img src="../../public/kefu_img.png" alt="" />
                            </div>

                            <h2 className='company-title'>Hi，我是您的专属项目顾问</h2>
                            <p className='company-desc'>为1000+企业提供内容数字化方案</p>
                            <img className='qrcode-img' src="../../public/kefu_qrcode.png" alt="" />
                            <p className='company-tips'>立即扫码，真人咨询</p>
                        </div>

                        <div className='middleground-button'>
                            <p>更多行业和场景解决方案 <img className='banner-right' src="../../public/右右.png" alt="" /></p>
                        </div>
                    </div>
                </li>

                <li className='resource'>资源与合作

                    <div className='resource-box'>
                        <div className='ecology'>
                            <h3>生态合作</h3>
                            {
                                newList1.map((item, index) => {
                                    return <p key={index}>{item}</p>
                                })
                            }
                        </div>
                        <div className='Source'>
                            <h3>资源中心</h3>
                            {
                                newList2.map((item, index) => {
                                    return <p key={index}>{item}</p>
                                })
                            }
                        </div>
                        <div className='on-line'>
                            <h3>帮助</h3>
                            {
                                newList3.map((item, index) => {
                                    return <p key={index}>{item}</p>
                                })
                            }
                        </div>

                    </div>
                </li>



            </ul>
        </div>
    )
}

export default Tab
